<template>
    <div>
      <!-- <div class="bg-white grid-content">
        <el-form :inline="true" :model="ysbsbyzjlForm" class="demo-form-inline">
  
            <el-date-picker
                style="top: 15px"
                v-model="value1"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          <el-form-item>
            <el-button type="primary" @click="reload">查询</el-button>
            <el-button type="success" @click="exportExcel">下载</el-button>
          </el-form-item>
        </el-form>
      </div> -->
      <div class="bg-white grid-content">
        <div style="overflow: hidden; ">
          <div class="mytitle">
            <svg-icon icon-class="ysbsbyzjlForm" class="myIcon" />
            抽油机运行数据</div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" :header-cell-style="{background:'#F5F7FA',color:'#909399'}" border>
          <el-table-column type="index" label="序号" >
          </el-table-column>
          <el-table-column align="center" prop="rq" label="日期">
          </el-table-column>
          <el-table-column align="center" prop="jackName" label="抽油机名称">
          </el-table-column>
          <el-table-column align="center" prop="orgName" label="单位名称">
          </el-table-column>
          <el-table-column align="center" prop="bc" label="班次">
          </el-table-column>
          <el-table-column align="center" prop="kjsj" label="启动时间" width="160px">
          </el-table-column>
          <el-table-column align="center" prop="tjsj" label="停止时间" width="160px">
          </el-table-column>
          <el-table-column align="center" prop="byz" label="班运转（h）">
          </el-table-column>
          <el-table-column align="center" prop="ylj" label="月累计（h）">
          </el-table-column>
          <el-table-column align="center" prop="zlj" label="总累计（h）">
          </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <el-pagination align='right'
            background
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page="pageNo"
            :page-sizes="[5,10, 20, 30, 40, 50]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
  
      </div>
    </div>
</template>
  
  <script>
  import ysbApi from '@/api/sjtb/scgl/ysbsbyzjl';
  import Bolb from "@/vendor/Blob";
  import Export2Excel from "@/vendor/Export2Excel";
  import XLSX from "xlsx-style";
  export default {
    data() {
      return {
        // show:false,//隐藏序列
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量          
        currentPage: 1,//当前页码

        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: "",
        //表格数据
        tableData: [],
        startDate: "",
        endDate: "",
        //excel数据
        excelData:[],
        approveStatus:'',
        ysbsbyzjlForm:{},
        // // table数据总条数
        // tableTotal: 30,
        // // 分页数
        // currentSize: 10,
        // //当前页
        // currentPage: 4
      };
    },
    created() {
      this.search();
      this.reload();
  },
    mounted(){
      this.filterTime();
    },
    methods: {
        /**
        * 查询列表
        */
        async search() {
        // this.pageNo = pageNo; //当前页码
        // this.pageSize = pageSize; //每页显示数量
        //发送查询请求
            let res = await ysbApi.getList(
              this.pageNo,
              this.pageSize,
              this.startDate,
              this.endDate
            );
            //判断是否成功
            if(res.success){
                console.log(res.data);
                //赋值
                this.tableData = res.data.records;
                // this.excelData =  res.data.records;
                //总数量
                this.total = res.data.total;
            }
        },

        exportExcel() {
          require.ensure([], async () => {
            const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
            //简单表格书写

            //添加表格id
            var myindex = [];
            for (var i = 0; i < this.total; i++) {
              myindex[i] = i + 1
            }
            var newindex = myindex.map(item => {
              console.log(item)
              return {
                index: item
              }
            })


            // console.log('123321', myindex)
            // console.log('newindex', newindex)
            //将添加的序号加入到表格中形成新的mergeArr表格
            let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
              return prev.map((item, index) => {
                return Object.assign(item, curr[index]);
              });
            });

            const multiHeader = [
          [
            "抽油机运行数据",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ],
        ];
            const Header = ['序号','日期','抽油机名称','单位名称','班次', '启动时间', '停止时间', '班运转（h）', '月累计（h）', '总累计（h）'];
            const filterVal = ['index','rq', 'jackName','orgName','bc', 'kjsj', 'tjsj', 'byz', 'ylj', 'zlj'];
             //需要合并的单元格
            const merges = ["A1:J1"];
            //表头样式
            let headerStyle = [
              "A1",
              "B1",
              "C1",
              "D1",
              "E1",
              "F1",
              "G1",
              "H1",
              "I1",
              "J1",
            ];

            const list = mergeArr;
            const data = this.formatJson(filterVal, list);

            export_json_to_excel({
              multiHeader: multiHeader,
              header: Header,
              merges: merges,
              headerStyle: headerStyle,
              data: data,
              filename: "抽油机运行数据",
              autoWidth: true,
              bookType: "xlsx",
            }),
              this.$message.success('导出报表成功！')


            // //复杂表头书写
            // //添加表格id
            // var myindex = [];
            // for (var i = 0; i < this.total; i++) {
            //   myindex[i] = i + 1
            // }
            // var newindex = myindex.map(item => {
            //   console.log(item)
            //   return {
            //     index: item
            //   }
            // });
            // // //将添加的序号加入到表格中形成新的mergeArr表格
            // let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
            //   return prev.map((item, index) => {
            //     return Object.assign(item, curr[index]);
            //   });
            // });
            // console.log('mergeArr', mergeArr);
            // console.log('tableData', this.tableData);

            // // const tHeader = ['日期', '姓名', '地址'];
            // // // 上面设置Excel的表格第一行的标题
            // //一级表头
            // const multiHeader = [['A5采油地面工程运行系统采油井单井设备维护','','','','','','','','','','','','']];
            // //二级表头
            // const header = ['序号', '日期', '通用井号', '标准井号', '单位', '距替方式', '是否报废井', '井刷', '抽注机', '电视', '控制柜', '采油树', '皮带'];
            // //表头字段
            // const filterVal = ['index', 'rq', 'tyjh', 'bzjh', 'dw', 'jtfs', 'sfbfj', 'js', 'czj', 'ds', 'kzg', 'cys', 'pd'];
            // //需要合并的单元格
            // const merges = ['A1:M1', ];
            // //表头样式
            // let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1'];
            // // 上面的index、nickName、name是tableData里对象的属性
            // console.log(this.tableData);
            // // const list = this.tableData;  //把data里的tableData存到list
            // // const data = this.formatJson(filterVal, list);
            // const list = mergeArr;
            // const data = this.formatJson(filterVal, list);
            // console.log(111111);
            // console.log(list);
            // console.log(data);

            // export_json_to_excel({
            //   //header: tHeader,
            //   multiHeader:multiHeader,
            //   header:header,
            //   merges:merges,
            //   headerStyle:headerStyle  ,
            //     data: data,
            //     filename: 'A5采油地面工程运行系统采油井单井设备维护',
            //     autoWidth: true,
            //     bookType: 'xlsx'
            // });//"列表excel"  是下载后的表名 可修改
            // this.$message.success('导出报表成功！')

          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => {
            return filterVal.map(j => v[j])
          })
        },

        /*** 当每页数量发生变化时触发该事件 */
        handleSizeChange(size) {
            console.log(size);
            this.pageSize = size;
            //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        /*** 当页码发生变化时触发该事件 */
        handleCurrentChange(page) {
            console.log(page);
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        // 序号计算
        indexMethod (index) {
            // index默认在0开始，这里+1
            return index + 1 + (this.pageNo - 1) * this.pageSize
        },

        // 获取当前日期
        filterTime() {
          var date = new Date();
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = date.getDate();
          d = d < 10 ? "0" + d : d;
          this.currentTime = y + "-" + m + "-" + d;
        },

        //日期查询点击事件
        reload() {
          this.tableData = [];

          console.log(1010);
          console.log(this.value1[0]); //value1[0] 开始时间 value1[1] 结束时间
          this.startDate = this.value1[0];
          this.endDate = this.value1[1];
          this.search();
          //  console.log(this.value1[0]);
          //this.$refs.table.reload({ page: 1 });
        },


    },
    
  };
  </script>
  
  
  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: larger;
    padding-left: 45%;
    margin-bottom: 16px;
    float: left;
  }
  
  //按钮组
  .myTime {
    float: right;
  }
  
  //格子的样式
  .bg-white {
    background: #ffffff;
  }
  
  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  
  .calendar ::v-deep .el-button-group::before {
    display: none;
  }
  
  .calendar ::v-deep .el-button-group::after {
    display: none;
  }
  
  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }
  
  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  </style>